<template>
  <div class="page_warp">
    <div id="chart1" class="chart1"></div>
    <div id="chart2" class="chart2"></div>
    <div>
      <ul class="data-warp">
        <li>
          <span>标题1</span>
          <span>标题2</span>
          <span>标题3</span>
          <span>标题4</span>
        </li>
        <li v-for="item in 20" :key="item">
          <span>内容1</span>
          <span>内容2</span>
          <span>内容3</span>
          <span>内容4</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      myChart1: '',
      myChart2: '',
      data1: '',
      data2: '',
      data3: '',
      timeData: ['2021/01/00', '2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08', '2021/01/09', '2021/01/010', '2021/01/011', '2021/01/012', '2021/01/013', '2021/01/014', '2021/01/015', '2021/01/016', '2021/01/017', '2021/01/018', '2021/01/019', '2021/01/020', '2021/01/021', '2021/01/022', '2021/01/023', '2021/01/024', '2021/01/025', '2021/01/026', '2021/01/027', '2021/01/028', '2021/01/029', '2021/01/030', '2021/01/031', '2021/01/032', '2021/01/033', '2021/01/034', '2021/01/035', '2021/01/036', '2021/01/037', '2021/01/038', '2021/01/039', '2021/01/040', '2021/01/041', '2021/01/042', '2021/01/043', '2021/01/044', '2021/01/045', '2021/01/046', '2021/01/047', '2021/01/048', '2021/01/049'],
      lineData1: [90, 87, 65, 20, 77, 13, 89, 16, 6, 39, 98, 81, 54, 67, 91, 1, 90, 57, 7, 31, 19, 6, 25, 30, 56, 19, 90, 21, 16, 76, 26, 56, 31, 35, 36, 14, 46, 21, 38, 74, 54, 65, 75, 50, 48, 36, 67, 37, 77, 15],
      lineData2: [86, 13, 56, 58, 33, 30, 13, 31, 12, 73, 4, 48, 78, 84, 30, 80, 61, 1, 46, 90, 86, 17, 15, 23, 89, 36, 63, 73, 53, 74, 16, 25, 87, 75, 13, 89, 6, 33, 63, 91, 66, 31, 67, 54, 29, 19, 91, 25, 10, 11],
      columnData: [28, 10, 2, 39, 33, 15, 4, 75, 72, 55, 20, 4, 42, 65, 47, 99, 53, 54, 24, 16, 42, 22, 90, 12, 4, 24, 71, 36, 91, 83, 73, 43, 29, 43, 77, 26, 37, 56, 1, 46, 53, 42, 11, 88, 98, 69, 58, 96, 28, 68],

    }
  },
  mounted() {
    this.initChart1()
    this.initChart2()
  },
  methods: {
    // 柱状图
    initChart1() {
      this.myChart1 = echarts.init(document.getElementById('chart1'));
      this.myChart1.setOption({
        title: {
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    },
    initChart2() {
      this.myChart2 = echarts.init(document.getElementById('chart2'));
      this.myChart2.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            left: '6%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          toolbox: {
          },
          legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature']
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisPointer: {
                type: 'shadow'
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: 'Precipitation',
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: '{value} ml'
              }
            },
            {
              type: 'value',
              name: 'Temperature',
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: '{value} °C'
              }
            }
          ],
          series: [
            {
              name: 'Precipitation',
              type: 'bar',
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' ml';
                }
              },
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
              ]
            },
            {
              name: 'Temperature',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' °C';
                }
              },
              data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            },
            {
              name: 'Temperature',
              type: 'line',
              yAxisIndex: 1,
              tooltip: {
                valueFormatter: function (value) {
                  return value + ' °C';
                }
              },
              data: [6.0, 9.2, 3.3, 1.5, 6.3, 3.2, 20.3, 23.4, 23.0, 16.5, 27.0, 26.2]
            }
          ]
        }
      )
    },
  }
}

</script>

<style lang="scss" scoped>
.page_warp{
  z-index: 999;
  .chart1{
    width: 90%;
    height: 260px;
  }
  .chart2{
    width: 90%;
    height: 360px;
  }
  .data-warp{
    height: 240px;
    overflow: auto;
  }
  .data-warp::-webkit-scrollbar{
    width: 4px;
    background-color: #c0c0c0;
  }
  .data-warp::-webkit-slider-thumb{
    border-radius: 4px;
    background-color: #ccc;
  }
}
</style>
